<template>
  <div class="listview">
    <list-view-top :playlist="state.playlist"></list-view-top>
    <play-list :playlist="state.playlist"></play-list>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import { getPlaylistDetail } from "@/request/api";
import listViewTop from "@/components/ListView/listViewTop";
import playList from "@/components/ListView/playList";
export default {
  name: "ListView",
  components: {
    [listViewTop.name]: listViewTop,
    [playList.name]: playList
  },
  setup(props) {
    const route = useRoute();
    const state = reactive({
      playlist: {
        creator: {},
        tracks: []
      },
    });
    onMounted(async () => {
      const res = await getPlaylistDetail({ id: route.query.id });
      console.log(res);
      let { playCount } = res.playlist;
      if (playCount >= 100000000) {
        playCount = (playCount / 100000000).toFixed(2) + "亿";
      } else if (playCount >= 10000) {
        playCount = (playCount / 10000).toFixed(2) + "万";
      }
      res.playlist.playCount = playCount;
      state.playlist = res.playlist;
    });
    return { state };
  },
};
</script>
